<template>
	<view>
		<view class="zjc-rb">
			<uni-swiper-dot :info="foodImages" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in foodImages" :key="index">
						<image style="width: 750rpx; height: 500rpx;" :src="item" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="ticket-main">
			<view class="ticket-desc">
				<view class="desc-header">
					<view class="sc-title">
						<text style="font-size: 40rpx; font-weight: 700;">{{foodInfo.foodName}}</text>
					</view>
					<view class="sc-time" style="margin-left: 30rpx;">
						<uni-icons type="eye" size="15" ></uni-icons>
						<text style="font-size: 25rpx; margin-left: 10rpx;">开放时间:  {{foodInfo.foodTime}}</text>
					</view>
					<view class="sc-adress">
						<uni-icons type="location" size="20" ></uni-icons>

						<text style="font-size: 25rpx; margin-left: 10rpx;">
							<text style="font-weight: 700; margin-right:20rpx; font-size: 30rpx;">店面地址</text> 
							{{foodInfo.foodAdress}}
						</text>
					</view>
					<view class="sc-phone">
						<uni-icons type="phone" size="20" ></uni-icons>
						<text style="font-size: 25rpx; margin-left: 10rpx;">
							<text style="font-weight: 700; margin-right:20rpx; font-size: 30rpx;">联系电话</text> 
							{{foodInfo.foodPhone}}
						</text>
					</view>
				</view>
				<view class="desc-main">
					<view style="width: 100%; margin-bottom:30rpx ;">
						<text style="font-size: 40rpx; font-weight: 700; margin-left: 20rpx;">店铺介绍</text>
					</view>
					<view style="width: 90%; margin: 0 auto;">
						<text>{{foodInfo.foodContent}}</text>
					</view>
				</view>
			</view>
			
			<view class="ticket-buy">
				
				<view style="width: 100%; height: 150rpx; max-width: 100%;">
					<view style=" margin-top: 140rpx; margin-left: 250rpx; position: absolute; bottom:30rpx;">
						<text style="font-size: 26rpx;">我也是有底线的</text>
					</view>
					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
	export default {
		components:{
			fuiButton
		},
		data() {
			return {
				current:1,
				foodImages: [
						"../../static/rb1.jpg",
					
					
						'../../static/rb2.jpg',
					
					
						'../../static/rb3.jpg'
					],
				
				foodInfo:{
					foodId:1,
					foodCoverImg:"https://img.redocn.com/sheji/20180625/zhongqingxiaomiancanyinmentouzhaopaixiaoguotu_9480671.jpg", 
					foodName:"银满斗",
					foodAddress:"永定区|距离22.2km",
					foodTips:"十大美食",
					foodTime:"9:00-17:00",
					foodPhone:"12345678910",
					foodContent:"美食店详情"
				},
			}
		},
		onLoad(options){
			this.foodInfo.foodId = options.foodId
			
				this.init()
		},
			
			
			
		methods: {
			change(e){
				this.current = e.detail.current
			},
			init(){
				this.request(
							{
								url:'/food/detail',
								methods:'GET',
								data:{foodId:this.foodInfo.foodId}
								
							}).then(res=>
							{
				                 if(res.code==='1')
								 {
									 this.foodInfo = res.data
									 this.foodImages = res.data.imgs
								 }
								 else
								 {
									 console.log("错误")
								 }
							}).catch(err=>
							{
								console.log("错误")
							})
				
			}
		}
	}
</script>

<style scoped>
.zjc-rb {
		width: 100%;
		height: 500rpx;
		margin: 0 0;
}
.swiper-box{
		width: 100%;
		height: 500rpx;
}
.ticket-buy {
	margin-top: 30rpx;
	background-color: #fff;
	
}
.ticket-item {
	display: flex;
	justify-content: space-between;
	margin-top: 25rpx;
	margin-left: 25rpx;
	border-bottom: #edededf1 solid 1px;
}
.ticket-main {
	position: absolute;
	top:450rpx;
	width:100%;
	background-color: #f7f7f7f7;
	border-radius: 30rpx;
}
.desc-header {
	width: 100%;
	height: 350rpx;
	border-radius: 30rpx;
	background-color: #fff;
}
.desc-header view {
	padding-top: 25rpx;
	margin-left: 25rpx;
	border-bottom: #f1f1f1f1 solid 1px;
}
.desc-main {
	width: 100%;
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 30rpx;
}
</style>
